<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="../js/vue.min.js"></script>
<div id="app">
    <button @click="toshow">点击让子组件显示</button>
    <component v-bind:is="which_to_show" keep-alive></component>

    <pr>
        说明：
        初始情况下，vm.$children属性中只有一个元素（first组件），<br>
        点击按钮切换后，vm.$children属性中有两个元素，<br>
        再次切换后，则有三个元素（三个子组件都保留在内存中）。<br>
        之后无论如何切换，将一直保持有三个元素。<br>

        测试结果，子组件改变之后，重新切换回来之后，组件内容被初始化。<br>
    </pr>
</div>
<template id="first">
    <div  @click="joinString">{{msg}}</div>
</template>
<script>


    var vm = new Vue({
        el: '#app',
        data: {
            which_to_show: "first"
        },
        methods: {
            toshow: function () {   //切换组件显示
                var arr = ["first", "second", "third", ""];
                var index = arr.indexOf(this.which_to_show);
                if (index < 3) {
                    this.which_to_show = arr[index + 1];
                } else {
                    this.which_to_show = arr[0];
                }
                console.log(this.$children);
            }
        },
        components: {
            first: { //第一个子组件
//                组件中的data属性必须是函数
                template: '#first',
                data: function() {
                    return {
                        msg: 'Hello, vue router!'
                    }
                },
                methods:{
                    joinString:function(){
                        this.msg=this.msg+"aaa+";
                        console.log("sdfsdf");
                    }
                }
            },
            second: { //第二个子组件
                template: "<div>这里是子组件2</div>"
            },
            third: { //第三个子组件
                template: "<div>这里是子组件3</div>"
            },
        }
    });
</script>
</body>
</html>